<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填报主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="common.js"></script>
    <link rel="stylesheet" href="common.css">
</head>
<body>
<div class="layui-container-fluid">

    <!--标题-->
    <div class="layui-bg-cyan">
        <h1  class="title"><span id="title-container"></span><span>填报</span></h1>

    </div>

    <fieldset class="layui-elem-field" id="table-container">
        <legend>请填报基本信息</legend>
        <div class="layui-form layui-field-box">
            <!--表格容器-->
            <div id="input-container"></div>

            <div class="submit-btn">
                <button class="layui-btn  layui-btn-warm layui-btn-fluid" lay-submit lay-filter="app">提交</button>
            </div>
        </div>
    </fieldset>
    <button class="layui-btn layui-btn-green layui-btn-fluid" id="list">已提交</button>
    <div id="el-footer"></div>
</div>


<script>


    let query = getOneQuery();
    //Demo
    layui.use(['layer', 'jquery', 'form'], function () {
        let $ = layui.jquery, layer = layui.layer, form = layui.form;
        let init = layer.load();
        let formContailer = $('#input-container');
        let titleContainer = $("#title-container");
        let tableContainer=$('#table-container');


        $.post(api.getExcelTpl, {s: query}, function (res) {
            if (res.errno === 0) {
                titleContainer.html(res.data.title);
                layer.msg(res.data.desc||'请按提示填写');
                let excelTpl = JSON.parse(res.data.tpl);
                let html = '';
                excelTpl.head.forEach(function (obj) {
                    html += tpl.inputTpl(obj.name, obj.title, obj.desc);
                });
                formContailer.html(html);
                form.render();
                layer.close(init);
            }
            if(res.errno===10000){
                layer.close(init);
                layer.msg(res.errmsg);
                tableContainer.remove();
            }
        });

        form.on('submit(app)', function (data) {
            let ladd = layer.load();
            let formData = JSON.stringify(data.field);
            let reqData={
                "fk_application_guid":query,
                'data':formData
            };
            $.post(api.addItems, reqData, function (res) {
                if (res.errno === 0) {
                    layer.close(ladd);
                    layer.alert('填报成功');

                }
            });
        });

        $('#list').click(function () {
            location.href="./list.html?s="+query;
        });

        $('#el-footer').html(tpl.footer());
    });

</script>
</body>
</html>